<template>
	<div :class="['lib_cover_uploader', { 'is-disabled': compDisabled }]">
		<el-upload class="upload" :action="uploadUrl" :disabled="compDisabled" v-bind="uploadConfig"></el-upload>
		<template v-if="!coverImage">
			<span class="el-icon-plus" @click="handleClickUpload()"></span>
		</template>
		<template v-else>
			<el-image ref="image" :src="coverImage" :preview-src-list="[coverImage]"></el-image>
			<el-button-group>
				<el-button type="text" icon="el-icon-edit" @click="handleClickUpload()"></el-button>
				<el-button type="text" icon="el-icon-search" @click="handlePreviewImage()"></el-button>
				<el-button type="text" icon="el-icon-delete" @click="handleDeleteUpload()"></el-button>
			</el-button-group>
		</template>
	</div>
</template>

<script>
const fileToBlob = (file) => {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		reader.onload = function (event) {
			let blob = new Blob([event.target.result], { type: file.type });
			window.URL = window.URL || window.webkitURL;
			resolve(window.URL.createObjectURL(blob));
		};
		reader.readAsArrayBuffer(file);
	});
};
export default {
	props: {
		value: { type: String, default: '' },
		data: { type: Object, default: () => {} },
		disabled: { type: Boolean, default: false }
	},
	inject: { elForm: { default: '' } },
	data() {
		const uploadAction = `${!window.baseUrl ? process.env.VUE_APP_BASEURL : window.baseUrl}`;
		return {
			coverId: this.value,
			uploadUrl: `${uploadAction}tbSysAttachment/upload`,
			uploadConfig: {
				limit: 1,
				ref: 'upload',
				accept: '.jpg,.jpeg,.png,.gif',
				data: { type: 1, showType: 1, category: '-1' },
				headers: { Authorization: this.$local.get('token') },
				onSuccess: this.handleUploadSuccess,
				onChange: this.handleUploadChange
			},
			coverImage: ''
		};
	},
	computed: {
		compDisabled() {
			return this.disabled || (this.elForm || {}).disabled;
		}
	},
	watch: {
		value(val) {
			this.coverId = val;
		},
		coverId(val) {
			this.$emit('input', val);
		}
	},
	methods: {
		handleClickUpload() {
			this.$refs['upload'].$refs['upload-inner'].handleClick();
		},

		handlePreviewImage() {
			this.$refs['image'].clickHandler();
		},

		handleDeleteUpload() {
			this.coverId = '';
			this.coverImage = '';
		},

		handleUploadSuccess(res, file, fileList) {
			if (res.code === '0') {
				let datas = res.data[0];
				this.coverId = datas.id;
				this.$refs['upload'].clearFiles();
			}
		},

		async handleUploadChange(file, fileList) {
			this.coverImage = await fileToBlob(file.raw);
		},

		async handleUpload() {
			await this.$refs['upload'].submit();
		}
	}
};
</script>

<style lang="scss" scoped>
.lib_cover_uploader::v-deep {
	position: relative;
	width: 208px;
	height: 118px;
	.upload {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}
	span.el-icon-plus {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: 24px;
		border-radius: 4px;
		box-sizing: border-box;
		border: dashed 1px #dcdfe6;
		cursor: pointer;
	}
	.el-image {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		overflow: hidden;
	}
	.el-button-group {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		border-radius: 4px;
		align-items: center;
		justify-content: space-around;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.el-button {
		padding: 5px;
		color: #f2f6fc;
		font-size: 18px;
	}
}
</style>
